<template>
	<view >
		<view  class="search_tab search_tabfixed" v-if="searchShow" >
			 <view class="top_search" style="width: 100%;"  @click="goSearch">
				 <label style="width: 100%;">搜索店铺内商品</label>
			 </view> 
		</view>
		<view class="goods index_wrap" :style="{ 'paddingTop':searchShow?'50px':''}">
			 <view :class="'selectClass ' +(topFixed || topFixedClass?'selectClassFixed':'')" >
			 	<view class="lf_selectClass"> 
			 		<view :class="'li_class '+(active == 0?'cur':'')" @click="changSort('0')">综合</view>
			 		<view :class="'li_class '+(active == 1?'cur':'')" @click="changSort('1')">销量</view>
			 		<view :class="'li_class select_price ' + (active == 4 || active == 3?'cur':'')"><text @click="changSort('4')">价格</text>
			 		  <view :class="'select_priceBox select_priceBox1 '+ (active == 4?'cur':'')" @click="changSort('4')"><text class="select_priceTop" ></text></view>
			 		  <view :class="'select_priceBox select_priceBox2 '+ (active == 3?'cur':'')" @click="changSort('3')"><text class="select_priceBottom" ></text></view>
			 		</view> 
			 	</view>
			 	<view class="lf_change" @click="clickChange()"><image :src="is_showlist == true?'../../../static/mall/icon_class1.png':'../../../static/mall/icon_class2.png'" ></image></view>
			 </view>
		     <view >   
				<view :class="'goods_box ' + (is_showlist == false?'goods_box1':'goods_box2')" >
					<!-- 第一列 -->
					<view  :class="'column goods_List '+ (is_showlist == true?'goods_ListPU':'')"  id="columnFirst">
						<view class="columnList">
							<view  :class="'item goods_block ' +(is_showlist == true?' goods_blockList' :'goods_blockWater') "
								v-for="(item, index) in columnFirst" :key="index"   @click = "goUrl(item.url)"> 
								<view class="goods_Img" v-if="is_showlist == true">
									<image :src="item.image" lazy-load="true" :alt="item.name" :mode="is_showlist == true ?'scaleToFill':'aspectFill'" :style="{'width':(windowWidth/2-10)+'px','height':(windowWidth/2-10)+'px'}"></image> 
								</view> 
								<view class="goods_Img" style="width: 150px; height: 150px;" v-else>
										<image :src="item.image" lazy-load="true" :alt="item.name" :mode="is_showlist == true ?'scaleToFill':'aspectFill'" style="width: 150px; height: 150px;"></image> 
								</view> 
								<view class="goods_txtBox"> 
								   <view class="goods_txt">
									<view class="goods_name">{{ item.name }} </view> 
									<view class="goods_kd" v-if="item.freight_value>0">	运费 ¥{{ item.freight_value }}  </view>
									<view class="goods_kd" v-else>包邮 </view>
									<view class="goods_price">
										<view class="goods_pricepd">¥  <text>{{ item.price }}</text></view>
										<view class="goods_priceNum">{{ item.sell_count }}人付款</view> 
									</view>
									<view class="icon_cart" ><image src="../../../static/mall/icon_cart.png"></image></view>
								   </view>
								</view> 
							</view>
						</view> 
					</view>
					<!-- 第二列 -->
					<view  :class="'column goods_List '+ (is_showlist == true?'goods_ListPU':'')" id="columnSecond">
						<view :class="'item goods_block ' +(is_showlist == true?' goods_blockList' :'goods_blockWater')" 
							v-for="(item, index) in columnSecond" :key="index" @click = "goUrl(item.url)">
							 <view class="goods_Img" v-if="is_showlist == true">
								<image :src="item.image" lazy-load="true" :alt="item.name" :mode="is_showlist == true ?'scaleToFill':'aspectFill'" :style="{'width':(windowWidth/2-10)+'px','height':(windowWidth/2-10)+'px'}"></image> 
							 </view> 
							 <view class="goods_Img" style="width: 150px; height: 150px;" v-else>
									<image :src="item.image" lazy-load="true" :alt="item.name" :mode="is_showlist == true ?'scaleToFill':'aspectFill'" style="width: 150px; height: 150px;"></image> 
							 </view> 
							 <view class="goods_txtBox"> 
								<view class="goods_txt">
								<view class="goods_name">{{ item.name }} </view> 
								<view class="goods_kd" v-if="item.freight_value>0">	运费 ¥{{ item.freight_value }}  </view>
								<view class="goods_kd" v-else>包邮 </view>
								<view class="goods_price">
									<view class="goods_pricepd">¥  <text>{{ item.price }}</text></view>
									<view class="goods_priceNum">{{ item.sell_count }}人付款</view> 
								</view>
								<view class="icon_cart" ><image src="../../../static/mall/icon_cart.png"></image></view>
								</view>
							 </view> 
						</view>
					</view>
				</view>  
				<view class="more_tip" v-show="is_more"> {{ is_moreTips }}</view>  
			 </view> 
				 
			 <view class="no_tip" v-show="tips_show">
				 <image src="../../../static/mall/no_tip.png" style="width:155px; height:128px;"></image>
				 <view>暂无商品</view> 
			 </view> 
				 
		     </view>
			 <!-- 向上 -->
			<view class="go_top" @tap="goTop()" v-show="gotopShow" >
				<image src="../../../static/mall/top.png"></image> 
			</view>  
		</view> 
	</view> 
</template> 
<script>  
	var common = require('../../../utils/common.js');
	var mall_common = require('../../mall/js/common.js');
	var shop_common = require('../../../utils/shop/common.js');
	const { windowWidth, windowHeight,screenHeight } = uni.getSystemInfoSync();
	var app = getApp();
	var page = 1 
	var timer = null 
	var pageParam = ''
	var store_id
	export default{
		data(){
			return{
				pageInfo:'',
				is_showlist:true,  
				screenHeight:screenHeight,
				windowWidth:windowWidth, 
				active:0,   
				
				searchShow:false,
				topFixedClass:'',
				gotopShow:false, 
				xuhao:1,
				// hackReset:false,
				tips_show:false,
				nodata:false,
				
				tempArray: [],
				columnFirst: [],
				columnSecond: [],
				list:[],
				isHas:true,
				is_more:false,
				is_moreTips:''
			}
			
		},
		props:['topFixed','changPage','gotop'], 	 
		watch: {  
			changPage:function(newVal, oldVal){
				if(newVal != oldVal){  
					if(this.isHas == true){ 
						this.changSortMore(this.active)
					} 
					
				}
			},
			gotop:function(newVal, oldVal){
				if(newVal == true){
					this.gotopShow = true
				}
			},
			list(newVal, oldVal) { 
				//当监听到,数据有变化时
				if (newVal.length === 0) {
					//清空数据
					// this.clear();
				} else if (newVal.length > 0) {
					//赋值给临时数组
					this.tempArray = newVal.slice(oldVal.length);
					//新增数据
					this.insert();
				}
			}
			 
		},
		components:{ },
		onLoad(option){    
			var that = this
			if(option.type == 'goodsClass'){
				that.searchShow = true
			}else{
				that.searchShow = false
			}
			pageParam = option 
			page = 1 
			store_id = option.store_id  
			mall_common.initData(store_id);
		},
		mounted(){    
			pageParam=this.$route.query  
			store_id = pageParam.store_id  
			page = 1
			this.changSort('0'); 
			
		},
		methods:{ 
			// 获取dom元素的高度
			getDomHeight(selector) {
				let query = uni.createSelectorQuery().in(this);
				let height = 0;
				query
					.select(selector)
					.fields(
						{
							size: true
						},
						data => {
							height = data.height;
						}
					)
					.exec();
				return height;
			},
			//新增数据
			insert() { 
				//只有数组内有数据才执行
				if (this.tempArray.length > 0) {
					//获取每一列的高度
					let columnFirstHeight = this.getDomHeight('#columnFirst'),
						columnSecondHeight = this.getDomHeight('#columnSecond');
					//获取加入的数据
					// console.log( this.tempArray)
					let data = this.tempArray.splice(0, 1);
					if (columnFirstHeight == columnSecondHeight || columnFirstHeight < columnSecondHeight) {
						//当高度相对,或第一列小于其他列,数据加入到第一列
						this.columnFirst.push(data[0]);
					} else {
						//数据加入到第二列
						this.columnSecond.push(data[0]);
					}
					this.$nextTick(() => {
						//当数据渲染完毕后,可以进行添加,知道临时数据被添加完毕
						this.insert();
					});
				}
			},
			// //清除数组
			// clear() {
			// 	this.columnFirst = [];
			// 	this.columnSecond = [];
			// },
			//外部调用,添加数据
			insertData(data){
				this.tempArray = data;
				//新增数据
				this.insert();
			}, 
			changSort(order){   
				var that = this  
				this.isHas = true
				// that.xuhao=order+1
				that.is_moreTips = ''
				that.active = order
				page = 1; 
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				}); 
				pageParam=that.$route.query  
				var Param={
					store_id:store_id,
					sort_id:pageParam.sort_id,
					sort_level:pageParam.sort_level, 
					order:order,
					page:1,
					page_size:10
				}   
				that.list = [] 
				that.columnFirst = []
				that.columnSecond = [] 
				common.post('Mall&a=get_store_goods_list',Param, data => {  
					that.list = data.goods_list
					if(data.goods_list && data.goods_list.length > 0){
						that.list = data.goods_list 
						if(data.goods_list.length == 0){  
							that.nodata = true
							that.$emit('nodataTranfer', that.nodata)
						}else{
							that.nodata = false
							that.$emit('nodataTranfer', that.nodata)
						}
						 
						if(data.goods_list.length <10){
							that.is_moreTips = '没有更多内容了' 
						}
						 
					}else{
						that.isHas = false
						that.tips_show = true
					}  
					page++
				})
			}, 
			onPageScroll:function(e){   
				if(e.scrollTop >20){
					this.topFixedClass = true
				}else{
					this.topFixedClass = false
				} 
				if(e.scrollTop >100 ){ 
					this.gotopShow = true
				}else{
					this.gotopShow = false
				}
			}, 
			onPullDownRefresh:function(){ 
			},
			onReachBottom: function() {   
				var that = this 
				if(that.isHas == true){ 
					that.changSortMore() 
				} 
				
			}, 
			changSortMore(order){  
				var that = this
				order = that.active 
				var Param={
					store_id:store_id,
					sort_id:pageParam.sort_id,
					sort_level:pageParam.sort_level, 
					order:order,
					page:page,
					page_size:10
				}  
				common.post('Mall&a=get_store_goods_list',Param, data => { 
					console.log(data)    
					if (data.next_page == 0 && data.goods_list.length <= 10 && data.total_page == page ) {//没有数据 
						that.is_more = true
						that.is_moreTips = '没有更多内容了'  
						that.isHas = false
						console.log('pppppppp',page)
					} 
					page++ 
					that.list = that.list.concat(data.goods_list);//将数据拼接在一起
					// if(data.total_page > page){
					// 	page++ 
					// }
					 
				}) 
			}, 
			clickChange(){   
				this.is_showlist = !this.is_showlist
				page = 1;  
				this.changSort(this.active); 
			}, 
			goTop(){ 
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			// 瀑布流定位
			waterFall(option) {      
				var that = this   
				const query = uni.createSelectorQuery().in(this);   
				 query.selectAll('.goods_ListPU .goods_blockList').boundingClientRect(res => {  
				 	let len = that.newList.length; 
					let height = 0;   
					 if(option == 0){
						that.mark = 0  
					  } 
					 that.loadingTop = 0
					for (let i = that.mark; i < len; i++) {
						height = res[i].height; 
						if (i < 2) {  
							that.$set(that.newList[i], 'top', 0);
							that.$set(that.newList[i], 'left', i);
							that.boxHeight.push(height);
							that.top.push(0);
							that.left.push(i);
							 
						} else { 
							 
							let minHeight = that.boxHeight[0];
							let index = 0;
							if (minHeight > that.boxHeight[1]) {
								minHeight = that.boxHeight[1]; 
								index = 1;
							} 
							 that.boxHeight[index] = minHeight + height + 5;
							 that.top.push(minHeight + 5);
							 that.left.push(index);
							 that.$set(that.newList[i], 'top', minHeight + 5);
							 that.$set(that.newList[i], 'left', index);
							 that.loadingTop = that.boxHeight[index]/2; 
						}
					} 
				 }).exec();	 
		    }, 
			goUrl(option){
				window.location.href = option
			},
			goSearch(){ 
				mall_common.goSearch(store_id)
			} 
		 }
	}
</script>

<style>
@import url("../css/mall.css");
 .lodingBox{ 
	 width: 100%;
	 height: 100%;
	 background: rgba(255,255,255,1);
	 height: 600px;
	 position: absolute;
	 z-index: 99;
	 left: 0;
	 top:0;
	 text-align: center; 
 }
.selectClassFixed{
	position: fixed;
	left: 0;
	top:0px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;
	z-index: 999;
	background: #eee;
}
.no_tip{
	text-align: center;
	padding: 40px 0;
	width: 100%;
	/* position: absolute;
	left: 0;
	top:140px */
}
.no_tip view{
	padding: 10px 0;
	color: #666;
}
.go_top{
	position: fixed;
	right: 20px;
	bottom: 80px;
	z-index: 999998;
}
.go_top image{
	width: 50px;
	height: 50px;
}
.select_price{
	padding-right: 30px!important;
	position: relative;
}

.select_price .select_priceTop{
	width:0;
	height:0;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
	border-bottom:4px solid #757e85; 
	position: absolute;
	right: 15px;
	top:5px;
	z-index:2;
}
.select_priceBox{
	position: absolute;
	right: 0;
	top:0px;
	width: 60px;
	height: 22px; 
}
.select_price .select_priceBottom{ 
	width:0;
	height:0;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
	border-top:4px solid #757e85;
	position: absolute;
	right: 15px;
	bottom:5px;
	z-index:2; 
}
 .select_price .select_priceBox1{
	 z-index: 3;
 }
 .select_price .select_priceBox2{
	 z-index: 2;
 }
 .select_price.cur .select_priceBox2.cur ,.select_price.cur .select_priceBox1.cur{
	 z-index: 1;
 }
.select_price .select_priceBox2.cur .select_priceBottom{
	border-top:4px solid #ff5700;  
}
.select_price .select_priceBox1.cur .select_priceTop{
	border-bottom:4px solid #ff5700; 
}
.selectClass{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items:center;
	padding: 10px;
}
.lf_selectClass{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items:left
}
.lf_selectClass .li_class{
	padding: 0 10px;
	font-size: 15px;
}
.lf_selectClass .li_class.cur{
	color: #ff5700;
} 
.lf_change image{
	width: 20px;
	height: 20px;
}

/* .goods_box .goods_blockList.left {
	left: 380upx;
}  
 */
.goods_box .goods_blockWater{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:flex-start; 
	margin-bottom: 5px;
	box-sizing: border-box; 
	border-radius: 5px;
} 

.goods_box .goods_blockWater .goods_kd{
	display: inline-block;
}

.goods_box .goods_blockWater .goods_Img image{
	width: 160px;
	height: 160px;
	border-radius: 5px 0 0 5px;
	padding: 0;
	margin: 0;
	display: block;
}
.goods_box .goods_blockWater .goods_txtBox{
	padding:0 10px; 
}

.goods_box .goods_blockWater .goods_name{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 28px;
	min-height: 42px;
	font-size: 14px;
}
.goods_block.goods_blockWater .goods_txt .goods_price{
	padding: 10px 0 0 0 ;
}

.goods_box .goods_blockList{
	/* position: absolute;
	 left: 10upx; */
	 /* width: calc(50% - 20upx); */
	 border: 1upx solid #f9f9f9;
	 background: #fff;
	 border-radius: 5px;
}
.goods_box{
	position: relative;
	padding: 0 5px;
	/* min-height: 500px; */
}
/* .search_tab{
	width: auto;
	right: 10px;
	top:70px
} */
.search_tabfixed{
	top:0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
 
.goods_box2 {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.goods_box2 .column{
	flex:1;
}
.goods_box2 .column .item image{
	/* width: 100%; */
}
.goods_box2 .columnList{
	padding-right: 5px;
	box-sizing: border-box;
}
.more_tip{
	text-align: center;
	color: #666;
	padding: 10px;
}
.goods_blockWater .goods_block .icon_cart {
    position: absolute;
    right: -5px;
    bottom: 0px;
	}
 
</style>
